<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/order.css"/>
    <title>订单</title>
</head>
<body>
<script src="../js/overall_mask.js"></script>
    <div id="order_w_pay">
        <header>
            <div class="header header-border">
                <div class="l"></div>
                <div class="c">订单</div>
                <div class="r"></div>
            </div>
            <div class="second-header">
                <ul>
                    <li class="on2">未支付 <span class="line"></span></li>
                    <li>待服务 <span class="line"></span></li>
                    <li>待评价 <span class="line"></span></li>
                    <li>已完成 <span class="line"></span></li>
                </ul>
            </div>
        </header>
        <div class="content pd_sec_head">
            <div class="order-list">
                <div class="order_unit order-delete">
                    <div class="top m-list list-justify">
                        <div class="m-list-name">
                            <div class="userbox">
                                <div class="imgClu">
                                    <img src="img/update/cw-userimg_03.jpg" alt=""/>
                                </div>
                                <span class="name">FRITZ CHEF</span>
                            </div>

                        </div>
                        <div class="m-list-inner">
                            <!--<a href="#">取消订单</a>-->
                            <span class="stars">
                                            <i class="icon icon-star on"></i>
                                            <i class="icon icon-star on"></i>
                                            <i class="icon icon-star on"></i>
                                            <i class="icon icon-star on"></i>
                                            <i class="icon icon-star"></i>
                                        </span>
                        </div>
                    </div>
                    <div class="con m-list list-input list-top">
                        <div class="m-list-name">
                            <div class="imgClu">
                                <img src="img/update/cw-pu1_03.jpg" alt=""/>
                            </div>
                        </div>
                        <div class="m-list-inner">
                            <h3>套餐一</h3>
                            <p>用餐时间：2015/04/05</p>
                            <p>自备食材</p>
                            <a href="order_w_conplaint.html" class="tousu clear"><p><i class="icon icon-note"></i><span>投诉</span></p></a>
                        </div>
                    </div>
                    <div class="bottom m-list list-justify">
                        <div class="m-list-name">
                            <p><span>合计：</span><span class="price">￥30.00</span></p>
                        </div>
                        <div class="m-list-inner">
                            <div class="order-btn order-btn-nor">
                                付款
                            </div>
                        </div>
                    </div>
                    <div class="delete_box">
                        <div class="pos">
                            <i class="icon icon-delete"></i>
                            <p>删除</p>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <footer class="footer">
            <ul class="m-list list-justify">
                <li>
                    <a href="index.html">
                        <i class="icon icon-home"></i>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="cook.html">
                        <i class="icon icon-cook"></i>
                        <p>厨师</p>
                    </a>
                </li>
                <li class="on">
                    <i class="icon icon-list"></i>
                    <p>订单</p>
                </li>
                <li>
                    <a href="user.html">
                        <i class="icon icon-user"></i>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </footer>

    </div>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script>
        function asidebar(){
        var tar = $('.order-delete'),move,fx, distance;
        tar.on('touchstart',function(e){
            var ev = event || e;
            var touch = ev.targetTouches[0];
            move = true;
            fx = touch.pageX - $(this)[0].offsetLeft;
            distance = 0;
        });
        tar.on('touchmove',function(e){
            if(move){
                var ev = event || e;
                var touch = ev.targetTouches[0];
                distance = touch.pageX - fx;
                distance = distance >= 0 ? 0 : distance <= -100 ? -100 : distance;
                $(this).css('left',distance);
            }
        });
            tar.on('touchend',function(){
                move = false;
                if(Math.abs(distance) < 50){
                    $(this).css('left',0)
                }else{
                    $(this).css('left',-100)
                }
            })
        }
        asidebar();

        $(".order-btn").click(function(){
            window.location.href = '../html/pay/pay.html';
        });
        $(".list-input").click(function(){
            window.location.href = 'order_w_details.html';
        });
    </script>
</body>
</html>